<template functional>
  <a-sub-menu
    :key="props.menuInfo.menuId.toString()"
  >
    <span slot="title">
      <a-icon v-if="props.menuInfo.menuIcon" :type="props.menuInfo.menuIcon ? props.menuInfo.menuIcon: 'setting'" />
      <div v-else style="display: inline-block;width: 20px"/>
      <span>{{ props.menuInfo.menuName }}</span>
    </span>
    <template v-for="item in props.menuInfo.children">
      <a-menu-item
        v-if="!item.children"
        :key="item.menuId.toString()"
        @click = "() => parent.$router.push(item.menuLink)"
      >
        <a-icon v-if="item.menuIcon" :type="item.menuIcon ? item.menuIcon: 'setting'" />
        <div v-else style="display: inline-block;width: 20px"/>
        <span>{{ item.menuName }}</span>
      </a-menu-item>
      <sub-menu
        v-else
        :menu-info="item"
      />
    </template>
  </a-sub-menu>
</template>

<script>
  export default {
    props: ['menuInfo'],
  };
</script>

<style scoped lang="less">
</style>
